<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/map-setting.css" />

<script>

$(document).ready(function() {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
var map;
map_initialize(); // load map
function map_initialize(){

var MapTitle="Hello GOOGLE MAPS";
var MapDesc;

    //Google map option
    var googleMapOptions = 
    { 
        center: mapCenter, // map center
        zoom: 17, //zoom level, 0 = earth view to higher value
        panControl: true, //enable pan Control
        zoomControl: true, //enable zoom control
        zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL //zoom control size
        },
        scaleControl: true, // enable scale control
        mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
    };
    map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions); 
    
    //##### drop a new marker on right click ######
    google.maps.event.addListener(map, 'rightclick', function(event) {      
      var EditForm = '<p><div class="marker-edit">'+
            '<form action="null" method="POST" name="SaveMarker" id="SaveMarker">'+
            '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>'+
            '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>'+
            '<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value="modelTown">MODEL TOWN</option><option value="dha">DHA</option>'+
            '<option value="gardenTown">Garden Town</option></select></label>'+
            '</form>'+
            '</div></p><button name="save-marker" class="save-marker">Save Marker Details</button>';
			
			addMarker(event.latLng, 'New Marker', EditForm, false, true, true, "css/images/pin_green.png");
        });    
    };


	  // Function for adding a marker to the page.
    function addMarker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, Removable, iconPath) {
       var marker = new google.maps.Marker({
            position: MapPos,
            map: map,
			draggable:DragAble,
			animation: google.maps.Animation.DROP,
			title:"Hello Google Maps!",
			icon: iconPath
        });
		
		 //Content structure of info Window for the Markers
    var contentString = $('<div class="marker-info-win">'+
    '<div class="marker-inner-win"><span class="info-content">'+
    '<h1 class="marker-heading">'+MapTitle+'</h1>'+
    MapDesc+ 
    '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'+
    '</div></div>');    

    
    //Create an infoWindow
    var infowindow = new google.maps.InfoWindow();
    //set the content of infoWindow
    infowindow.setContent(contentString[0]);

    //Find remove button in infoWindow
    var removeBtn   = contentString.find('button.remove-marker')[0];

   //Find save button in infoWindow
    var saveBtn     = contentString.find('button.save-marker')[0];
	
   //add click listner to remove marker button
    google.maps.event.addDomListener(removeBtn, "click", function(event) {
        //call remove_marker function to remove the marker from the map
        //remove_marker(marker);
		marker.setMap(null);
    });
	
	if(typeof saveBtn !== 'undefined') //continue only when save button is present
    {
        //add click listner to save marker button
        google.maps.event.addDomListener(saveBtn, "click", function(event) {
            var mReplace = contentString.find('span.info-content'); //html to be replaced after success
            var mName = contentString.find('input.save-name')[0].value; //name input field value
            var mDesc  = contentString.find('textarea.save-desc')[0].value; //description input field value
            var mType = contentString.find('select.save-type')[0].value; //type of marker
            
            if(mName =='' || mDesc =='')
            {
                alert("Please enter Name and Description!");
            }else{
                //call save_marker function and save the marker details
                //save_marker(marker, mName, mDesc, mType, mReplace);
				alert("SAVED!");
            }
        });
    }
    
    //add click listner to save marker button        
    google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker); // click on marker opens info window 
    });
      
    if(InfoOpenDefault) //whether info window should be open by default
    {
      infowindow.open(map,marker);
    }
	
 }


});
</script>


</head>
<body>
    <div id="google_map"></div>
</body>
</html>